<template>
  <div class="login">
    <div class="login-bg" :style="loginBg">
      <div class="containder">
        <div class="title">
          <img src="@/images/Login/logo.png" alt="" srcset="" />
          <span>新龙县平台</span>
        </div>
        <div class="content">
          <div class="input">
            <img src="@/images/Login/账号.png" alt="" srcset="" />
            <input
              class="inputtext"
              type="text"
              v-model="user"
              placeholder="请输入账号"
            />
          </div>
          <div class="input">
            <img src="@/images/Login/密码.png" alt="" srcset="" />
            <input
              class="inputtext"
              type="text"
              v-model="password"
              placeholder="请输入密码"
            />
          </div>
          <div class="select">
            <input type="checkbox" name="like" value="0" /><span>记住我</span>
          </div>
          <div @click="logintohome(user, password)">
            <span class="logintohome">登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/Login.js";
import Login from "@/images/Login/login_bg.png";
// import { use } from "vue/types/umd";
export default {
  data() {
    return {
      user: "",
      password: "",
      codeinput: "",
      loginBg: {
        background: `url(${Login}) center center no-repeat`,
      },
    };
  },
  methods: {
    async logintohome(user, password) {
      const values = {
        account: user,
        password,
      };
      const loginData = await login(values);
      localStorage.setItem("token", loginData);
      console.log(loginData);
      if (loginData) this.$router.push("/home");
      else alert("密码错误!");
    },
  },
};
</script>

<style>
.login {
  background-image: url("../../images/bg.png");
  /* background: url("../../assets/images/Login.png"); */
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  width: 100%;
}
.login {
  /* 背景图高度 */
  height: 4.69rem;
  margin: 0;
  padding: 0;
  position: relative;
}
/* 登录框定位 */
.login-bg {
  width: 4.1rem;
  height: 2.82rem;
  position: absolute;
  top: 0.8rem;
  left: 3.01rem;
}

.title {
  margin-top: 0.3125rem;
}

.containder {
  padding: 0 0.520833rem;
  text-align: center;
  font-size: 0.072917rem;
}

.title {
  font-size: 0.125rem;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #2ff8ff;
  margin-bottom: 0.197917rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  margin-top: 0.416667rem;
}

.content .inputtext {
  font-size: 0.072917rem;
  width: 2.1875rem; /* 420px */
  height: 0.208333rem; /*30px */
  margin-bottom: 0.052083rem; /*10px */
}

.content img {
  width: 0.104167rem;
  height: 0.104167rem;
  margin-right: 0.036458rem;
}

.codeinput {
  font-size: 0.072917rem;
  width: 1.614583rem; /*  310px */
  margin-right: 0.052083rem;
  height: 0.208333rem; /*30px */
  margin-bottom: 0.052083rem; /*10px */
}

.codetext {
  display: inline-block;
  width: 0.520833rem;
  text-align: center;
  height: 0.208333rem; /*30px */
  line-height: 0.208333rem;
  color: #fff;
  background: #2faeff;
}
.select {
  height: 0.208333rem; /*30px */
  color: #fff;
  font-size: 0.083333rem;
}

.logintohome {
  display: inline-block;
  background-color: #2faeff;
  font-size: 0.072917rem;
  width: 2.083333rem; /* 420px */
  height: 0.208333rem; /*30px */
  line-height: 0.208333rem;
  margin-bottom: 0.052083rem; /*10px */
  cursor: pointer;
  color: #ffffff;
  font-weight: bold;
}
.input {
  margin: 0.175234rem /* 30/171.2 */ 0;
}
</style>